import React, { Component } from 'react';
import { Drawer, Button, Row, Col, Table } from 'antd';
import styles from './index.less';

const { Column, ColumnGroup } = Table;

class ProjectDetailDrawer extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // count: 0, //当月签约套数
  //             price: 0, //当月签约金额

  //             yearCount: 0, //当年签约套数
  //             yearPrice: 0, //当年签约金额

  //             nextYearCount: 0, //次年签约套数
  //             nextYearPrice: 0, //次年签约金额

  //             canCount: 0, //剩余可签套数
  //             canArea: 0, //剩余可签面积
  //             canPrice: 0, //剩余可签金额
  render() {
    const {
      title,
      width,
      onClose,
      visible,
      currentItem,
      data1,
      data2,
      summaryYear,
      month,
    } = this.props;
    return (
      <div className={styles.eject}>
        <Drawer
          // bodyStyle={{ backgroundColor: '#f5f8fa' }}
          title={title}
          width={width}
          onClose={onClose}
          visible={visible}
        >
          <div style={{ marginBottom: '5px' }}>{currentItem ? currentItem.projectName : ''}</div>
          <Row>
            <Col span={24}>
              <Table
                loading={data1 && data1.length === 0}
                pagination={false}
                dataSource={data1}
                bordered
                size="middle"
              >
                <Column title="项目/业态" dataIndex="title" key="title" className="td-bgcolor" />
                <ColumnGroup
                  title={
                    <>
                      {summaryYear}年{month}月月度签约
                    </>
                  }
                >
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="count"
                    key="count"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="price"
                    key="price"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>{summaryYear}年年度签约</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="yearCount"
                    key="yearCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="yearPrice"
                    key="yearPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>{summaryYear * 1 + 1}年年度签约</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="nextYearCount"
                    key="nextYearCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="nextYearPrice"
                    key="nextYearPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>项目剩余可签</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="canCount"
                    key="canCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>面积</div>(平米)
                      </>
                    }
                    dataIndex="canArea"
                    key="canArea"
                    align="right"
                    render={text => text.toFixed(2)}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="canPrice"
                    key="canPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
              </Table>
            </Col>
          </Row>
          <div style={{ margin: '10px 0 5px 0' }}>
            {currentItem ? currentItem.stageName : ''}（当前分期）
          </div>
          <Row>
            <Col span={24}>
              <Table
                loading={data2 && data2.length === 0}
                pagination={false}
                dataSource={data2}
                bordered
                size="middle"
              >
                <Column title="项目/业态" dataIndex="title" key="title" className="td-bgcolor" />
                <ColumnGroup
                  title={
                    <>
                      {summaryYear}年{month}月月度签约
                    </>
                  }
                >
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="count"
                    key="count"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="price"
                    key="price"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>{summaryYear}年度签约</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="yearCount"
                    key="yearCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="yearPrice"
                    key="yearPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>{summaryYear * 1 + 1}年度签约</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="nextYearCount"
                    key="nextYearCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="nextYearPrice"
                    key="nextYearPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
                <ColumnGroup title={<>分期剩余可签</>}>
                  <Column
                    title={
                      <>
                        <div>套数/车位数</div>(套/个)
                      </>
                    }
                    dataIndex="canCount"
                    key="canCount"
                    align="right"
                    width={100}
                    render={text => text}
                  />
                  <Column
                    title={
                      <>
                        <div>面积</div>(平米)
                      </>
                    }
                    dataIndex="canArea"
                    key="canArea"
                    align="right"
                    render={text => text.toFixed(2)}
                  />
                  <Column
                    title={
                      <>
                        <div>金额</div>(万元)
                      </>
                    }
                    dataIndex="canPrice"
                    key="canPrice"
                    align="right"
                    render={text => (text / 10000).toFixed(4)}
                  />
                </ColumnGroup>
              </Table>
            </Col>
          </Row>

          <div
            style={{
              width: '100%',
              borderTop: '1px solid #e9e9e9',
              padding: '10px 16px',
              background: '#fff',
              textAlign: 'center',
            }}
          >
            <Button type="primary" onClick={this.props.onClose}>
              关闭
            </Button>
          </div>
        </Drawer>
      </div>
    );
  }
}
export default ProjectDetailDrawer;
